<template>
    <div class='login'>
        <div class="login_form">
            <div class="avatar">
                <img src="../assets/logo.png">
            </div>
            <div>
                <el-form ref="form" :rules="myrule" :model="form"  label-width="0px" class="login_pan">
                    <!-- 用户名 -->
                    <el-form-item  prop="username" >
                        <el-input placeholder="用户名" v-model="form.username" prefix-icon="iconfont icon-user"></el-input>
                    </el-form-item>
                    <!-- 密码 -->
                    <el-form-item  prop="password">
                        <el-input type="password" v-model="form.password" placeholder="密码" prefix-icon="iconfont icon-mima2"></el-input>
                    </el-form-item>
                    <!-- 按钮区域 -->
                    <el-form-item class="btns">
                        <!-- 蓝色按钮 -->
                         <el-button @click="submit" type="primary">登录</el-button>
                         <!-- 灰色按钮 -->
                         <el-button @click="clear" type="info">重置</el-button>
                    </el-form-item>
                </el-form>

            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'VueProjectLogin',
  methods: {
    doLogin (valid) {
      console.log('dologin called')
      if (valid) {
        this.$http.post('login', this.form).then(res => {
         const data = res.data
         console.log(data)
         if (data.meta.status === 200) {
           this.$message.success('登录成功!')
           // 保存token到sessionStorage.
           const token = data.data.token
           console.log(token)
           window.sessionStorage.setItem('token', token)
           // 路由跳转到首页.
           this.$router.replace({ name: 'Home' })
         } else {
           this.$message.error(data.meta.msg)
         }
        })
      } else {
        alert('失败')
      }
    },
    submit () {
      // submit()
      this.$refs.form.validate(this.doLogin)
      // this.$refs.form.validate(valid => {
      //   console.log(valid)
      // })
    },
    clear () {
      // this.form.username = ''
      // this.form.password = ''
      this.$refs.form.resetFields()
    }
  },
  data () {
    return {
      form: {
        username: 'admin',
        password: '123456'
      },
      myrule: {
        username: [
          { required: true, message: '输入用户名', trigger: 'blur' },
          { min: 3, max: 15, message: ' 长度在3-5之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '输入密码', trigger: 'blur' },
          { min: 3, max: 15, message: ' 长度在3-5之间', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

<style lang='less' scoped>
    .login_pan{
        //靠近底部
        position: absolute;
        bottom: 0;
        //宽度充满组件
        width: 100%;
        //上下边距0， 左右边距13px
        padding: 0 13px;
        box-sizing: border-box;
    }

    // 按钮居右
    .btns{
        display: flex;
        justify-content: flex-end;
    }
    .login_form{
        width: 470px;
        height: 300px;
        background-color: white;
        border-radius: 13px;
        // 居中
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);

    }
    .login{
        height: 100%;
        margin: 0;
        padding: 0;
        background: skyblue
    }
    .avatar{
        background-color: #eee;
        width: 100px;
        height: 100px;
        border: 1px solid #eee;
        //容器以圆形出现
        border-radius: 50%;
        //图片的别顶头
        padding: 10px;
        //外圈搞个阴影
        box-shadow: 0 0 10px #ddd;

        //调整容器位置,搞到中间
        //绝对定位
        position: absolute;
        //距离父容器50%，但需要再回调自身长度的一半, 向上回调自身长度一半.
        left:50%;
        transform: translate(-50%, -50%);
        //图片在父容器内
        img{
            height: 100%;
            width: 100%;
            //图片搞成圆形
            border-radius: 50%;
            //图片整体背景灰色.
            background-color: #eee;
        }
    }
</style>
